<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .demo {
        font-family: sans-serif;
        border: 1px solid #eee;
        border-radius: 2px;
        padding: 20px 30px;
        margin-top: 1em;
        margin-bottom: 40px;
        user-select: none;
        overflow-x: auto;
      }

      .tab-button {
        padding: 6px 10px;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        border: 1px solid #ccc;
        cursor: pointer;
        background: #f0f0f0;
        margin-bottom: -1px;
        margin-right: -1px;
      }
      .tab-button:hover {
        background: #e0e0e0;
      }
      .tab-button.active {
        background: #e0e0e0;
      }
      .tab {
        border: 1px solid #ccc;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <!-- 
      动态组件：
        概念：
          可以动态切换要渲染的组件
        使用：
          通过一个 特殊的元素 component ，然后设置 is 属性，属性值就是要渲染的组件名字
        语法：
          <component is="Home"></component>
        特点：
          与 v-if 控制组件的渲染一样，会引起组件的卸载与重新创建

     -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        template: `
        <div class="demo">
          <button
            v-for="tab in tabs"
            :key="tab"
            :class="['tab-button', { active: currentTab === tab }]"
            @click="currentTab = tab"
          >
            {{ tab }}
          </button>

          <!--
          <Home v-if="currentTab === 'Home'"></Home>
          <About v-if="currentTab === 'About'"></About>
          <Posts v-if="currentTab === 'Posts'"></Posts>
          -->

          <component :is="currentTab" />
        </div>
        `,
        data() {
          return {
            currentTab: "Home",
            tabs: ["Home", "About", "Posts"],
          };
        },
      });

      app.component("Home", {
        template: `
          <div class="tab">
            
            首页
            <button @click="count++">{{ count }}</button>
          </div>
        `,
        data() {
          return {
            count: 1,
          };
        },
        created() {
          console.log("Home created");
        },
        unmounted() {
          console.log("Home unmounted");
        },
      });

      app.component("About", {
        template: `
          <div class="tab">
            关于页
            <input type="text" v-model="msg" />  
          </div>
        `,
        data() {
          return {
            msg: "",
          };
        },
        created() {
          console.log("About created");
        },
        unmounted() {
          console.log("About unmounted");
        },
      });

      app.component("Posts", {
        template: `
          <div class="tab">帖子页</div>
        `,
        created() {
          console.log("Posts created");
        },
        unmounted() {
          console.log("Posts unmounted");
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
